<template>
  <div class="booklist">
  <ul>
    <li class="book-list-wrap cf" v-for="(item,index) in data" :key="index">
      <book-list-item :href="'/bookdetail/'+item.id" :img="item.img" :tag="item.tag">
        <span slot="book">{{item.book}}</span>
        <span slot="author">{{item.author}}</span>
        <span slot="desc">{{item.desc}}</span>
      </book-list-item>
      <top-sign v-if="showsign" :top="index+1"></top-sign>
    </li> 
  </ul>
  </div>
</template>

<script>
import BookListItem from '@/components/BookListItem.vue'
import TopSign from '@/components/TopSign.vue'
export default {
  components:{
    BookListItem,
    TopSign
  },
  data(){
    return {
      
    }
  },
  props:{
    data:Array,
    showsign:{
      type:Boolean,
      default:false
    }
  },
 
}
</script>

<style>
.booklist{
  padding: 0 15px;
}
.cf::after{
  display: table;
  content: '';
  clear: both;
}
.book-list-wrap{
  position: relative;
  padding: 20px 0;
}
</style>